<template>
  <el-form :ref="'form' + item.itemName" :rules="myRules" :model="item">
    <el-form-item :label="item.itemName" v-if="item.required" prop="indicatorsActVal" :label-width="labelWith">
      <el-autocomplete
        v-model="item.indicatorsActVal"
        :fetch-suggestions="querySearchAsync"
        :placeholder="'请输入' + item.itemName"
        @select="getChoose"
        clearable
      ></el-autocomplete>
    </el-form-item>
    <el-form-item :label="item.itemName" v-else :label-width="labelWith">
      <el-autocomplete
        :disabled="isFinish"
        v-model="item.indicatorsActVal"
        :fetch-suggestions="querySearchAsync"
        :placeholder="'请输入' + item.itemName"
        @select="getChoose"
        clearable
      ></el-autocomplete>
    </el-form-item>
  </el-form>
</template>

<script>
  import {searchDict} from "@/api/dict";

  export default {
    name: "MyAutoInput",
    props: {
      isFinish:{
        type:Boolean,
        default:false
      },
      item: Object,
      labelWith: {
        type: String,
        default: ""
      }
    },
    created() {
      this.getData()
    },
    data() {
      return {
        myRules: {
          indicatorsActVal: [
            {required: true,message: '字段不能为空', trigger: 'blur'},
            {required: true,message: '必填字段不能为空', trigger: 'change'}
          ],
        },
        options: [],
        state: '',
        timeout: null,
      };
    },
    methods: {
      getData() {
        searchDict({ id: this.item.dictId }).then(response => {
          if (response.code === 200) {
            this.options = response.page.map(function (item) {
              return {value:item.key}
            })
          }
        });
      },
      querySearchAsync(queryString, cb) {

        this.item.indicatorsActVal = queryString

        var options = this.options;
        var results = queryString ? options.filter(this.createStateFilter(queryString)) : options;

        if (results.length === 0) {
          results = [{value:queryString}]
        }

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 500 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
        };
      },
      getChoose(val) {
        this.item.indicatorsActVal = val.value
        this.state = val.value
        console.log(this.item)
      }
    }
  };
</script>

<style lang="scss" scoped>
  .el-radio {
    line-height: 36px;
  }
</style>
